<template>
	<view class="container">
		<view class="header_nav">
			<view class="nav_box">
				<view class="nav_item" @tap="tabFnc.tabBtn(navItem.status)" v-for="(navItem,navIndex) in tabFnc.tabList"
					:key="navItem.status">
					<view :class="['nav_item_text',tabFnc.tabType == navItem.status ? 'nav_item_text_act' :'']">
						{{navItem.name}}
					</view>
					<view class="nav_item_tips" v-if="tabFnc.tabType == navItem.status"></view>
				</view>
			</view>
			<view class="nav_search" @tap="tabFnc.searchBtn">
				<image :src="iconUrl + '71.png'" mode=""></image>
				搜索
			</view>
		</view>
		<view class="content">
			<view class="goods_list">
				<goodsList v-if="orderList.listData && orderList.listData.length> 0" :dataList="orderList.listData"
					ref="goodsListRef" @getOrderData="orderList.getOrderList" @init=""></goodsList>
				<uni-load-more v-if="orderList.listData && orderList.listData.length > 0" iconType="auto"
					:status="orderList.loading" />
			</view>
			<view class="blank_box" v-if="orderList.isBlank">
				<image :src="iconUrl + '54.png'" mode=""></image>
				<text>暂时没有订单～</text>
				<view class="xjs-btn-primary" @tap="goIndex">去首页逛逛</view>
			</view>
			<view class="goods_hot_list"
				v-if="orderList.listData && orderList.listData.length < 1 && orderList.isBlank">
				<goodsHotList :hotData="orderList.hotGoodsList" ref="goodsHotListRef"></goodsHotList>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import api from '@/api'
	import { reactive, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import goodsList from '@/pages/shopping/components/goodsList.vue'
	import goodsHotList from '@/pages/shopping/components/goodsHotList.vue'
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	const goodsListRef = ref()
	const goodsHotListRef = ref()
	onLoad(async (options) => {
		tabFnc.tabType = options.orderStatus
	})
	onShow(() => {
		orderList.getOrderList()
		orderList.getHotGoodsData()
	})
	/* tab栏 */
	const tabFnc = reactive({
		tabType: -1,
		tabList: [
			{ name: '全部', status: -1 },
			{ name: '待付款', status: 0 },
			{ name: '待发货', status: 1 },
			{ name: '待收货', status: 2 },
			{ name: '已完成', status: 3 },
		],
		tabBtn: async (type) => {
			if (tabFnc.tabType == type) { return }
			tabFnc.tabType = Number(type)
			onDataInit()
			orderList.getOrderList()
		},
		searchBtn: async () => {
			uni.navigateTo({
				url: '/pages/shopping/orderListSerch/index'
			})
		},

	})
	/* 订单列表 */
	const orderList = reactive({
		page: 1,
		limit: 20,
		loading: 'more',
		listData: [],
		hotGoodsList: [],
		isBlank: false,
		/* 订单数据 */
		getOrderList: async () => {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			orderList.loading = 'loading'
			const { data: { total = 0, records = [] } } : any = await api({
				method: 'get',
				url: `/mall/shopping/order/newPage`,
				data: {
					page: orderList.page,
					limit: orderList.limit,
					buyType: 1,
					status: tabFnc.tabType
				}
			})
			if (records) {
				for (let i = 0; i < records.length; i++) {
					records[i].allCount = 0;
				}
				records.forEach(item => {
					item.orderGoods.forEach(itemList => {
						if (itemList.spotDeliveryTypeMsg.substr(0, 1) == 0) {
							itemList.spotMsg = itemList.spotDeliveryTypeMsg.substr(1, itemList.spotDeliveryTypeMsg.length);
							itemList.spotMsg = `${itemList.spotMsg ? itemList.spotMsg.split(",")[0].split(":")[0] : 15}点前下单当天发货，${itemList.spotMsg ? itemList.spotMsg.split(",")[0].split(":")[0] : 15}
							点后的订单次日发货${itemList.spotMsg && itemList.spotMsg.split(",")[1] == 1 ?
									'周末及法定节假日顺延' : ''}`;
						} else {
							itemList.spotMsg = itemList.spotDeliveryTypeMsg.substr(1, itemList.spotDeliveryTypeMsg.length);
						}
					})
					item.orderGoods.forEach(val => {
						item.allCount += val.count
					})
				})
				orderList.listData = orderList.page == 1 ? records : orderList.listData.concat(records)

				if (!records.length || orderList.listData.length >= total) {
					orderList.loading = 'noMore'
				} else {
					orderList.loading = 'more'
				}
				orderList.isBlank = orderList.listData.length < 1 ? true : false
			} else {
				orderList.loading = 'more'
				orderList.isBlank = true
			}

			uni.hideLoading()
		},
		/* 推荐商品数据 */
		getHotGoodsData: async () => {
			const records : any = await api({
				method: 'get',
				url: `/mall/shopping/goods/goods-group/recommend/pay-success/0?pageType=0`,
			})
			if (records) {


				orderList.hotGoodsList = records.data
			}
		}
	})
	const goIndex = () => {
		uni.switchTab({
			url: '/pages/onlineMall/index'
		})
	}
	const scrollToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}
	const onDataInit = async () => {
		orderList.page = 1
		orderList.listData = []
		scrollToTop()
	}
	// 页面下拉刷新
	onPullDownRefresh(async () => {
		if (orderList.loading == 'loading') {
			uni.stopPullDownRefresh()
		} else {
			try {
				await onDataInit()
				await orderList.getOrderList()
			} catch (error) {
			}
			uni.stopPullDownRefresh()
		}
	})
	// 触底
	onReachBottom(async () => {
		if (orderList.loading == 'noMore') return false
		orderList.page++
		await orderList.getOrderList()
	})
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
		min-height: 100vh;
		background-color: #F9F6F6;
	}

	.header_nav {
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		position: sticky;
		top: 0;
		/* #ifdef H5 */
		top: 84rpx;
		/* #endif */
		left: 0;
		z-index: 10;
		border-top: 1rpx solid #E4E6E6;

		.nav_box {
			width: 566rpx;
			display: flex;
			align-items: center;
			height: 88rpx;
			box-sizing: border-box;
			padding-top: 28rpx;

			.nav_item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 20%;

				.nav_item_text {
					margin-bottom: 20rpx;
					font-size: 28rpx;
					color: #5C5E5E;
				}

				.nav_item_text_act {
					font-weight: bold;
					font-size: 32rpx;
					color: #1B2120;
				}

				.nav_item_tips {
					width: 32rpx;
					height: 8rpx;
					background-color: #FF6084;
					border-radius: 4rpx;
				}
			}
		}

		.nav_search {
			padding-left: 30rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #1A1A1A;
			box-shadow: -12rpx 0 20rpx -18rpx rgba(0, 0, 0, 0.2);
			height: 88rpx;

			image {
				margin-right: 8rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.content {
		padding-top: 30rpx;

		.goods_list {
			width: 686rpx;
			margin: 0 auto;
		}

		.blank_box {
			width: 686rpx;
			margin: 0 auto;
			margin-bottom: 64rpx;
			padding: 96rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;
			border-radius: 24rpx;
			line-height: 1;

			image {
				width: 350rpx;
				height: 284rpx;
			}

			text {
				margin: 40rpx 0 24rpx 0;
				font-size: 32rpx;
				color: #1B2120;
			}

			view {
				width: 260rpx;
			}
		}

		.goods_hot_list {
			width: 686rpx;
			margin: 0 auto;
		}
	}
</style>